<template>
	<view class="login login-bg" @touchmove.stop.prevent="()=>{}">
		<view class="content padding" >
			<!-- 头部logo -->
			<view class="header margin-bottom">
				<view class="logoname font-title">红樱桃</view>
				<view class="logotext font-sub-title">时刻关注您的健康</view>
			</view>
			<view class="login-form">
				<view class="login-group">
					<input class="login-input font-normal" v-model="phone" placeholder="手机号码" name="input"></input>
				</view>
				<view class="login-group">
					<input class="login-input font-normal" 	:password="!showPassword" v-model="password" placeholder="密码" ></input>
					<image
						class="img cuIcon" 
						:class="showPassword?'cuIcon-attention':'cuIcon-attentionforbid'" 
						@tap="showPass"
					></image>
				</view>
				<view class="login-group" style="padding-right: 0;">
					<input v-model="code" type="number" class="font-normal code-input" placeholder="验证码" name="input"></input>
					<button class='cu-btn theme-blue-bg font-normal code-btn' :disabled="showcount" @tap="getCode()">{{showcount ? count + 's' : '验证码'}}</button>
				</view>
				<!-- 底部信息 -->
				<view>
					<text 
						@tap="isShowAgree" 
						class="cuIcon"
						:class="showAgree?'cuIcon-radiobox':'cuIcon-round'"
					>同意</text>
					<!-- 协议地址 -->
					<text @click="goAgreement1" class="text-blue">《红樱桃DrCherry 软件服务协议》</text>、<text @click="goAgreement2" class="text-blue">《红樱桃Dr Cherry健康监测预警服务协议》</text>
				</view>
				<view class="margin-top login-item">
					<view class="margin-bottom flex justify-between align-center">
						<view>
							<button class="cu-btn login-btn font-normal" @tap="startregister()">注 册</button>
						</view>
						<view>
							<text class="theme-text-blue font-normal" @tap="jump('/pages/login/login')">返回登录</text>
						</view>
						<view>
							<text class="theme-text-blue font-normal" @tap="jump('/pages/login/forget')">找回密码</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer text-center font-normal">徐州市红樱桃医疗科技有限公司</view>
	</view>
</template>

<script>
	import md5 from '@/common/lib/md5.min.js'
	import checkUtil from '@/utils/checkUtil.js'
	var that;
	export default {
		data() {
			return {
				phone: '', //用户/电话
				password: '', //密码
				isRotate: false, //是否加载旋转
				showcount:false,
				timer: '',
				count: '', // 倒计时
				showAgree:true, //协议是否选择
				code:'',
				showPassword:false
			};
		},
		onShow() {
			this.timer = uni.getStorageSync('registTimer')||null;
			this.count = uni.getStorageSync('registCount')||'';
			this.showcount =  uni.getStorageSync('registShowcount')||false
			if(!this.timer){
				this.timer = setInterval(() => {
				
			       if (this.count > 0) {
			
			         this.count--;
					 uni.setStorageSync('registCount',this.count);
			        } else {
			
			          this.showcount = false;
					 uni.setStorageSync('registShowcount',false)
			         clearInterval(this.timer);
					 uni.removeStorageSync('registTimer')
			         this.timer = null;
			
			        }
			
			       }, 1000)
			}
		},
		onLoad(options) {
			that = this;
		},
		methods: {
			goAgreement1(){
				uni.navigateTo({
					url:'/pages/agreement1/agreement1'
				})
			},
			goAgreement2(){
				uni.navigateTo({
					url:'/pages/agreement2/agreement2'
				})
			},
			isShowAgree(){
				//是否选择协议
				this.showAgree = !this.showAgree;
			},
			jump (path) {
				uni.navigateTo({
					url: path
				})
			},
			showPass(){
				//是否显示密码
				this.showPassword = !this.showPassword
			},
			getCode(){
				if(!checkUtil.checkPhone(this.phone)){
					uni.showToast({
						"title":"请输入正确的手机号",
						"position":"bottom",
						"icon":"none"
					})
					return;
				}
				if(this.showcount){
					return;
				}
				uni.showLoading({
					"title":"验证码发送中..."
				})
			    const TIME_COUNT = 60;
				this.$http.getSMSCode(
				{
					phone:that.phone
				}).then((res) => {
					if(res.code==1){
						uni.hideLoading();
						uni.showToast({
							title:"验证码发送成功",
							position:"bottom",
							icon:"none"
						})
						if (!this.timer) {
						
						       this.count = TIME_COUNT;
						
						       this.showcount = true;
							   uni.setStorageSync('registShowcount',true)
						       this.timer = setInterval(() => {
						
						       if (this.count > 0 && this.count <= TIME_COUNT) {
						
						         this.count--;
								 uni.setStorageSync('registCount',this.count);
						        } else {
						
						          this.showcount = false;
						         uni.setStorageSync('registShowcount',false)
						         clearInterval(this.timer);
						         uni.removeStorageSync('registTimer')
						         this.timer = null;
						
						        }
						
						       }, 1000)
						
						      }
					}else{
						uni.hideLoading();
						uni.showToast({
							title:res.message,
							position:"bottom",
							icon:"none"
						})
					}
				})
			},
			register(params) {
				if (params) {
					this.$store.dispatch('register', params).then(res => {
						if (res.code == 1) {
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: '注册成功！即将返回登录界面'
							});
							uni.setStorageSync("loginInfo",{
								"phone":that.phone,
								"password":that.password,
								"loginType":"1"
							});
							setTimeout(function(){
								uni.reLaunch({
									url: '/pages/login/login'
								})
							},1500)
						}else{
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: res.message
							})
						}
					}).catch(() => {
						uni.hideLoading()
					})
				}
			},
			startregister() {
				if (this.phone=='') {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '请输入手机号'
					});
					return;
				}
				if (this.password.length < 5) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '密码至少6位'
					});
					return;
				}
				if(this.code.length!=4){
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '请输入4位验证码'
					});
					return;
				}
				if(!this.showAgree){
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '请仔细阅读并同意协议'
					});
					return;
				}
				uni.showLoading({
					"title":"正在注册..."
				})
				// 网络请求
				const params = {
					code: this.code,
					phone: this.phone,
					password: md5(this.password)
				}
				this.register(params)
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
	.cu-form-group {
		border: 0.5px solid #ddd;
		margin-bottom: 45rpx;
		min-height: 70rpx;
		padding-right: 0;
	}
	.login-bg {
		height: 100%;
		padding-top: 200rpx;
	}
	.theme-text-blue {
		color: #427EE3!important;
	}
	.theme-blue-bg {
		background-color: #427EE3!important;
		color: #fff;
		border-radius: 0;
	}
	.code-input{
		width: 350rpx;
	}
	.img{
		width: 32upx;
		height: 53upx;
		font-size: 32upx;
	}
	.logoname {
		font-weight: 800;
		color: #427EE3;
	}
	.logotext {
		font-weight: 800;
		position: relative;
		left: 180rpx;
	}
	.login-btn {
		border-radius: 0;
		background-color: #427EE3!important;
		color: #fff;
		padding: 0 64rpx;
		width: 220rpx;
		height: 80rpx;
	}
	.login-bg .content .header {
		width: 100%;
		margin-bottom: 80rpx;
		padding-left: 160rpx;
	}
	
	.login-item {
		margin-top: 80rpx;
	}
	
	.footer {
		text-align: center;
		width: 600rpx;
		bottom: 15rpx;
		position: fixed;
		left:75rpx;
	}
	.code-btn{
		width: 220rpx!important;
		height: 80rpx!important;
	}
	.login-input{
		width:560rpx ;
	}
	.login-group{
		margin: 0 auto;
		background-color: #ffffff;
		padding: 1px 14px;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		min-height: 48px;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		border: 0.5px solid #ddd;
		margin-bottom: 30px;
		min-height: 33px;
		width: 600rpx;
		height: 80rpx;
	}
	.login-form{
		width: 600rpx;
		margin: 0 auto;
	}
	

</style>
